
<div class="container">
  <!DOCTYPE html>
<html lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<title>前端性能 | Miles`s</title>

<link rel="stylesheet" href="https://mada.gitee.io/notes//css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://mada.gitee.io/notes//js/highlight.js"></script>






  <div class="container">
    <nav class="navbar level">
      <div class="navbar-brand">
          <a class="nav-item" href="https://mada.gitee.io/notes/"><h1 class="title is-3">Miles`s</h1></a>
      </div>           
      <div class="navbar-menu has-text-centered is-active">
          <div class="navbar-end is-centered">
              
           </div>
      </div>
    </nav>
  </div>
  <main class="container">
      
      
      <h1 class="title is-3">2016</h1>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Nov 18</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/css-performance/">网站性能优化之CSS优化</a></h1>
          <div class="content is-hidden-mobile">
            关键呈现路径 优化关键呈现路径对于改进网页性能至关重要：我们的目标是优先显示与用户要在网页上执行的主要操作有关的内容。
要提供快速的网络用户体验，浏览器需要做许多工作。大多数此类工作我们网络开发人员是看不到的：我们编写标记，屏幕上就会显示出漂亮的网页。但是，浏览器究竟是如何使用我们的HTML，CSS和JavaScrip在屏幕上呈现像素呢？
从收到HTML，CSS和JavaScript字节到对其进行必需的处理从而转变为呈现的像素的过程中还有许多中间步骤，优化性能骑士就是了解这些步骤中发生了什么－即关键呈现路径
通过优化关键呈现路径，可以大大缩短首次呈现网页的时间。另外，了解关键呈现路径还可以为构建高性能交互式应用程序打下基础。
其实，处理交互式更新的过程是相同的，只是在连续循环中完成，理想情况下每秒可以处理60个侦！但是，我们还是按部就班来学校。
首先，开始介绍浏览器如何显示简单网页。
构建 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/css-performance/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Nov 13</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/web-performance-advance/">高性能网站建设进阶指南</a></h1>
          <div class="content is-hidden-mobile">
            《高性能网站建设指南》（2008）一书的跟进，其中提升性能的14条规则依旧适用，但网页内容和Web2.0应用程序的增长带来了一系列的性能挑战。
1－7章：JavaScript性能 8-12章：网络性能 13-14章：浏览器性能 最后提供一组好用的性能分析工具。
第一章 理解Ajax性能 1.1 权衡 计算机程序中，选择算法要权衡运行时间和内存，会为抢占市场而牺牲代码质量。
每一次接触代码，我们都在权衡改善代码质量和避免产生Bug的可能性。关注性能时，我们必须反复斟酌所有权衡因素。
1.2 优化原则 目的：希望降低程序的整体开销，把重点放在对程序整体开销影响最大的部分。
1.3 Ajax  采取正确的分工 数据包因该尽可能的小  1.4 浏览器 处理CSS依旧是最大的开销。理解DOM的奥秘并减少它的影响比试图给脚本提速效果更好。
1.5 哇！ 误用炫酷特性也会导致不必要的DOM操作，从而带来 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/web-performance-advance/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Nov 11</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/performance/">高性能网站建设指南</a></h1>
          <div class="content is-hidden-mobile">
            本书的主要部分－－14个性能规则。每个规则都进行了介绍，按照优先级顺序，没章一个。并非每个规则都要应用到每个网站，也不是每个网站都应该按同一种角度来分析Web页面。
前端性能的重要性 只有10%～20%的追踪用户响应时间是花在从Web服务获取HTML文档并传送到浏览器中的。如果希望能够有效的减少页面的响应时间，就必须关注剩余80%～90%的最终用户体验。
跟踪Web页面性能 浏览器下载并解析HTML文档。
时间花在哪了？ 80%的时间花在了页面的组件上。
 有缓存的场景并没有太多的下载活动。在这段时间里，浏览器正在解析HTML，javascript和css，并从缓存中获取组件。 大量的HTTP请求并行发生。 在请求脚本时不会发生并行请求。这是因为在很多情况下，浏览器在下载脚本时会阻塞额外的HTTP请求。  性能黄金法则  大部分网站下载HTML文档的时间不会超过总响应时间的20%，因此关注 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/performance/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      
      
  </main>
  <section class="section">
  <div class="container">
    <nav class="level is-mobile">
      <div class="level-left">
        <div class="level-item">
          
          <a class="button is-rounded" disabled>
            <span class="icon is-small is-marginless">
              <i class="fa fa-angle-left"></i>
            </span>
            上一页
          </a>
          
        </div>
      </div>
      <div class="level-right is-marginless">
        <div class="level-item">
          
          <a class="button is-rounded" disabled>
            下一页
            <span class="icon is-small is-marginless">
              <i class="fa fa-angle-right"></i>
            </span>
          </a>
          
        </div>
      </div>
    </nav>
  </div>
</section>

  <section class="section">
  <div class="container has-text-centered">
    <p></p>
  </div>
</section>


</div>